<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>金额统计</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
</head>
<body>
<div style="padding-left: 20%;padding-top: 10%" id="app">
         <span style="color: red">
             朴妍
         </span><br/>
    总完成单数：{{py.num +17660}}，总计：{{py.money + py.num*10 +1195522 }} 今日完成：{{py.jrMoney}} 今日预计：{{py.yjMoney}}
    <br/>
    <span style="color: red">
        妃琳卡
        </span><br/>
    总完成单数：{{flk.num +16774}}，总计：{{flk.money + flk.num*10 +1157406 }} 今日完成：{{flk.jrMoney}} 今日预计：{{flk.yjMoney}}
    <br/>
    <span style="color: red">
         莹纯旗舰店
         </span><br/>
    总完成单数：{{yc.num +9045}}，总计：{{yc.money + yc.num*10 +615410 }} 今日完成：{{yc.jrMoney}} 今日预计：{{yc.yjMoney}}
    <br/>
    <span style="color: red">
             总计
        </span><br/>
    总完成单数：{{yc.num + flk.num + py.num +43479}}，总计： {{yc.money + yc.num*10 +flk.money + flk.num*10+py.money +
    py.num*10 +2968338 }} 今日完成：{{yc.jrMoney+flk.jrMoney+py.jrMoney}} 今日预计：{{yc.yjMoney+flk.yjMoney+py.yjMoney}}
    <br/><br/>
    已充值：{{pymoney}} 已消耗：{{(yc.money + yc.num*10 +flk.money + flk.num*10+py.money +
    py.num*10 +2968338)}} 剩余：{{pymoney - (yc.money + yc.num*10 +flk.money + flk.num*10+py.money +
    py.num*10 +2968338)}}


    <div style=" width: 60%">
        <div style="padding-left: 25%">
            <el-form label-width="90px" ref="form" size="mini">
                <el-form-item label="支付宝账号">
                    <el-input placeholder="请输入内容" style="width: 265px;" value="zhongyiqili4@163.com"
                              disabled>
                        <el-button slot="append" class="tag-read2"
                                   :data-clipboard-text="'zhongyiqili4@163.com'"
                                   @click="copys('tag-read2')">
                            复制
                        </el-button>
                    </el-input>
                </el-form-item>
                <!-- <el-form-item label="充值key">
                     <el-input placeholder="请输入内容" style="width: 265px;" v-model="key" disabled>
                         <el-button slot="append" class="tag-read3" :data-clipboard-text="key"
                                    @click="copy('tag-read3')">
                             复制
                         </el-button>
                     </el-input>
                 </el-form-item>-->
            </el-form>
        </div>
        <!--<div style="text-align:center">转账时请将复制的充值key填写到备注中</div>-->

        <div class="code"><img src="http://sj.carotg.com/static/img/4.4dfc88f.jpg"></div>
        <div style="text-align:center;margin-top: 15px">转账完成后提交订单号</div>

        <el-form label-width="90px" ref="form" size="mini"
                 style="padding-left: 20%;padding-top: 15px"
                 :inline="true">
            <el-form-item label="交易单号">
                <el-input placeholder="请输入交易单号" style="width: 205px;" v-model="order">
                </el-input>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" @click="supPay">
                    充值
                </el-button>
            </el-form-item>
        </el-form>


    </div>


    <el-table :data="tableData2">
        <el-table-column prop="id" label="编号" width="80">
        </el-table-column>
        <el-table-column prop="money" label="金额" width="100">
        </el-table-column>
        <el-table-column prop="" label="凭证截图" width="260">
            <template slot-scope="scope">
                <a :href="scope.row.img" target="_Blank"><img :src="scope.row.img"
                                                              style="max-width: 240px;max-height: 100px"></a>
            </template>
        </el-table-column>
        <el-table-column prop="addTime" label="充值时间" width="180">
        </el-table-column>
    </el-table>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            tableData2: [],
            py: {
                num: 0,
                money: 0,
                jrMoney: 0,
            },
            flk: {
                num: 0,
                money: 0,
                jrMoney: 0,
            },
            yc: {
                num: 0,
                money: 0,
                jrMoney: 0,
            },
            pymoney: 0,
            order: ""
        },
        methods: {
            copys(a) {
                let _this = this;
                let clipboard = new ClipboardJS("." + a);
                clipboard.on("success", e => {
                    console.log("复制成功");
                    _this.$message({
                        type: "success",
                        message: "复制成功"
                    });
                    clipboard.destroy();
                });
                clipboard.on("error", e => {
                    _this.$message({
                        type: "error",
                        message: "复制失败，请手动复制"
                    });
                    console.log("该浏览器不支持自动复制");
                    clipboard.destroy();
                });
            },
            supPay() {
                let _this = this;
                axios
                    .post("/api/supPay.php", {
                        id: "supPay",
                        order: _this.order
                    })
                    .then(function (response) {
                        _this.$message({
                            type: response.data.status,
                            message: response.data.msg
                        });
                    });
            },
            getMoneyUp() {
                let _this = this;
                axios
                    .post("/api/getMoneyUpPy.php", {
                        id: "getMoneyUpPy"
                    })
                    .then(function (response) {
                        _this.tableData2 = response.data.data
                    });
            },
            getMoney(a) {
                let _this = this;
                axios
                    .post("/api/user.php", {
                        id: "getPYBillingInfo",
                        user: a
                    })
                    .then(function (response) {
                        _this[a] = response.data
                    });
            },
            getPyMoney(a) {
                let _this = this;
                axios
                    .post("/api/getPyMoney.php", {
                        id: "getPyMoney",

                    })
                    .then(function (response) {
                        _this.pymoney = response.data
                    });
            }
        },
        mounted() {
            this.getMoney("py");
            this.getMoney("flk");
            this.getMoney("yc");
            this.getPyMoney();
            this.getMoneyUp();
        }
    })
</script>
<style>
    .code {
        text-align: center;
    }

    .code img {
        width: 250px;
        height: auto;
    }

</style>
</html>